<template>
  <div class='footers'>
      <ul>
        <router-link to='/home' tag="li">
          <div class='index'>
            <i class='iconfont icon-index' style='color:#179dfe' v-if="active=== '/home' "></i>
            <i class='iconfont icon-index-copy' v-else></i>
          </div>
          <span>首页</span>
        </router-link>
        <router-link to='/classify' tag="li">
          <div class='index'>
            <i class='iconfont icon-leimupinleifenleileibie-copy' style='color:#179dfe' v-if="active=== 'classify' "></i>
            <i class='iconfont icon-leimupinleifenleileibie' v-else></i>
          </div>
          <span>分类</span>
        </router-link>
        <router-link to='/news' tag="li">
          <div class='index'>
            <i class='iconfont icon-dongtai-copy' style='color:#179dfe' v-if="active=== 'news' "></i>
            <i class='iconfont icon-dongtai' v-else></i>
          </div>
          <span>动态</span>
        </router-link>
        <router-link to='/my' tag="li">
          <div class='index'>
            <i class='iconfont icon-me0-copy' style='color:#179dfe' v-if="active=== 'my' "></i>
            <i class='iconfont icon-me0' v-else></i>
          </div>
          <span>我的</span>
        </router-link>
      </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 'home',
    }
  },
  mounted() {
    this.active = this.$route.path.slice(1)
    // 打印得到的是路由跳转地址
    // console.log(this.active)
  },
}
</script>

<style lang="less">
  .footers{
    position: fixed;
    width: 100%;
    height: 1.4rem;
    background: #eee;
    bottom: 0;
    ul {
      width: 100%;
      display: flex;
      li{
        width: 25%;
        height: 1.4rem;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
        font-size: .26rem;
        span{
          margin-top: .1rem;
          font-size: .3rem;
        }
        .iconfont{
          font-size: .5rem;
        }
      }
      .router-link:hover, .router-link-active{
        color: #1296DB;
      }
    }

  }
</style>
